<template>
  <div class="container">
    <div class="section" v-if="group_detail.groupId">
      <h2 class="title">
        {{group_detail.groupHeadName}}的拼团
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            拼团编号：
          </div>
          <div class="detail">
            {{group_detail.groupId}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目分类：
          </div>
          <div class="detail">
            {{group_detail.groupProjectCategory}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            医院名称：
          </div>
          <div class="detail">
            {{group_detail.hospitalName}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            支付金额：
          </div>
          <div class="detail">
            {{group_detail.payAmount}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            团长姓名：
          </div>
          <div class="detail">
            {{group_detail.groupHeadName}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            团长手机号：
          </div>
          <div class="detail">
            {{group_detail.groupHeadPhone}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            开团时间：
          </div>
          <div class="detail">
            {{group_detail.groupCreateTime}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            剩余时间：
          </div>
          <div class="detail">
            {{group_detail.remaining_time}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            成团人数：
          </div>
          <div class="detail">
            {{group_detail.groupSize}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            已参团人数：
          </div>
          <div class="detail">
            {{group_detail.groupNum}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            拼团状态：
          </div>
          <div class="detail">
            {{group_detail.statusStr}}
          </div>
        </li>

      </ul>
    </div>
    <div class="data-table">
      <el-table :data="group_detail.groupUserResponseList"
                stripe
                style="width: 100%">
        <el-table-column prop="nickName"
                         align="center"
                         label="成员
">
        </el-table-column>
        <el-table-column prop="phone"
                         align="center"
                         label="手机号">
        </el-table-column>
        <el-table-column prop="createTimeStr"
                         align="center"
                         label="参团时间">
        </el-table-column>
        <el-table-column prop="userTypeStr"
                         align="center"
                         label="用户类型">
        </el-table-column>
        <el-table-column prop="payAcount"
                         align="center"
                         label="支付金额">
        </el-table-column>
        <!-- <el-table-column prop="name"
                         align="center"
                         label="订单">
        </el-table-column> -->

      </el-table>
    </div>
  </div>
</template>
<script>
import { groupDetail } from '../../api/group'

export default {
  data () {
    return {
      tableData: [],
      group_id: 0,
      group_detail: {}
    }
  },
  methods: {
    get_data () {
      groupDetail( {
        groupId: this.group_id - 0
      }).then((result) => {
        let res = result.data
        if (res.code === 0) {
          let now_time = new Date().getTime()
          let end_time = res.data.groupEndTime - now_time
          if (end_time > 0) {
            //计算出相差天数
            let days = Math.floor(end_time / (24 * 3600 * 1000))
            //计算出小时数
            let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
            let hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数
            let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
            let minutes = Math.floor(leave2 / (60 * 1000))
            //计算相差秒数
            let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
            let seconds = Math.round(leave3 / 1000)
            res.data.remaining_time = `剩余 ${hours}小时${minutes}分钟${seconds}秒`
          } else {
            res.data.remaining_time = ""
          }

          this.group_detail = res.data
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error(err);
      });
    }
  },
  created () {
    if (this.$route.query.id) {
      this.group_id = this.$route.query.id
      this.get_data()
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 200px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
        }
        .detail {
          color: #666;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          //   主图 和 项目展示图 列表
          .pic-list {
            .pic-item {
              display: inline-block;
              vertical-align: middle;
              background-color: #ccc;
              width: 100px;
              height: 100px;
              margin-right: 15px;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
          //   项目详情图列表
          .detail-list {
            width: 375px;
            border: 1px solid #ccc;
            .detail-item {
              width: 100%;
              height: 900px;
              background-color: #ccc;
            }
          }
          &.project_detail {
            vertical-align: top;
          }
        }
      }
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
}
</style>

